<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="css/bootstrap.css">
		<link rel="stylesheet" href="css/bootstrap-icons.css">
		<script src="js/bootstrap.bundle.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}

			a{
				text-decoration: none;
				list-style-type: none;
				color: white;
			}

			ul li{
				list-style: none;
				list-style-type: none;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class=" d-flex bg-black justify-content-between containerNav" style="height: 50px; width: 100%;">
				<div class="box2 d-flex align-content-center" style="line-height: 50px;">
					<div class="box d-block d-sm-none d-md-block">
						<img src="img/1.1.png" alt="" style="height: 100%;width: 100%;">
					</div>
					<a href="#" class="text-decoration-none text-white fw-bold fs-5 d-block d-sm-none d-md-block">Web开发技术</a>
				</div>
				<nav class="navbar navbar-expand-sm navbar-light bg-black pe-md-0 pe-sm-4"><!-- navbar-expand由默认的竖着变成横着 -->
					<div class="container-fluid justify-content-end">
						<a class="navbar-brand " href="#" style="color: aliceblue;font-size: 13px;">前端开发</a>
						<button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse"
							data-bs-target="#nav1">
							<span class="navbar-toggler-icon "></span>
						</button>
						<div class="navbar-collapse collapse" id="nav1">
							<ul class="navbar-nav me-auto ">

								<li class="nav-item"><a class="nav-link " href="#about"
										style="color: white;opacity: 0.6;  font-size: 13px;">后端开发</a></li>
								<li class="nav-item"><a class="nav-link " href="#gallery"
										style="color: white;opacity: 0.6; font-size: 13px;">移动开发</a></li>
								<li class="nav-item"><a class="nav-link " href="#contact"
										style="color: white;opacity: 0.6; font-size: 13px;">云计算/大数据</a></li>
							</ul>
						</div>
					</div>
				</nav>
			</div>
			<div class="row content1 gx-0 ">
				<div class="col-lg-9 col-md-6">
					<ul class="d-flex align-content-around flex-column mt-3 ms-3">
						<li><a href="#" class="text-white text-decoration-none h3 ">互联网+时代的热点————</a><span
								class="text-warning h3">前端工程师</span></li>
						<li class="mt-5"><a href="#"
								class="text-white text-decoration-none ">Web前端就是使用HTML、CSS、JavaScript等专业技能和工具将产品的UI设计稿实现成网站产品，涵盖用户PC端、
								移动端等网页，处理视觉和交互等问题......</a></li>
						<li class="mt-5"> <a class="btn btn-primary" href="#">新技术与新框架</a></li>
					</ul>
				</div>
				<div class="col-lg-3 col-md-6 mt-3 mb-3 pe-5 ">
					<div class="Tup w-100 h-100 img-fluid "
						style="overflow: hidden;background-image: url('./img/1.3.png');background-size: cover;background-position: 50% 50%;">

					</div>

				</div>
			</div>
			<div class="row bg-primary gx-0 ">
				<div class="col-lg-6 col-md-12 text-md-center ps-5 mt-5 mb-5 ps-md-0">
					<a href="#" class="text-white h5 ">让我们的未来充满更多的可能，现在开始!</a>
				</div>
				<div class="col-lg-6 col-md-12 col-sm-12">
					<div class="input-group pe-5 mt-5 mb-5 ps-lg-0 ps-sm-5 ms-sm-0 ms-5">
						<input type="email" class="form-control" placeholder="请输入你的邮箱">
						<button class="btn btn-dark" type="button">注册</button>
					</div>
				</div>
			</div>
			<div class="row bg-white ">
				<div class="row mt-4">
					<div class="col-lg-6 ps-5 d-none d-lg-block">
						<div class=" tuP ">
							<img src="img/1.4.png" alt="" class="img-fluid ">
						</div>

					</div>
					<div class="col-lg-6 col-md-12">
						<ul class="list-group mt-4 pe-lg-5 pe-md-0 ps-lg-0 ps-sm-5 ms-sm-0 ms-5">
							<li class="list-group">
								<h4>关于课程</h4>
								<p>
									使用css高级特效丰富网页元素的呈现方式和效果。
								</p>
								<p>
									使用Flex布局模型，实现移动端网页的基本布局;了解两种移动端
									网页适配不同分辨率的解决方案，并使用不同的解决方案制作
									网页元素宽高随着视口的变化而等比缩放的效果。
								</p>
								<p>
									学习响应式的原理，并使用bootstrap框架完成响应式网页的布局。
								</p>
							</li>
							<li>
								<button class="btn btn-dark btn-sm" type="button">查看更多>></button>
							</li>

						</ul>
					</div>
				</div>
				<div class="row ps-5 pe-4 mt-3 mb-4">
					<div class="col-lg-4  col-md-4 col-sm-12">
						<ul class="list-group  text-center text-white bg-info">
							<li class="list-group mt-4">
								<h6>前端开发</h6>
								<p class="d-none d-lg-block">
									Lorem, ipsum dolor sit amet consecteturadipisicing elit. Sit architecto nam
									aliquamtotam voluptate.Tenetur assumenda iure
									sed laborum molestiae?
								</p>

							</li>
							<li class="mb-4">
								<button class="btn btn-primary btn-sm" type="button">基础与框架</button>
							</li>

						</ul>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-12">
						<ul class="list-group bg-secondary text-center text-white ">
							<li class="list-group mt-4">
								<h6>后端开发</h6>
								<p class="d-none d-lg-block">
									Lorem, ipsum dolor sit amet consecteturadipisicing elit. Sit architecto nam
									aliquamtotam voluptate.Tenetur assumenda iure
									sed laborum molestiae?
								</p>

							</li>
							<li class="mb-4">
								<button class="btn btn-primary btn-sm" type="button">语言与数据库</button>
							</li>

						</ul>
					</div>
					<div class="col-lg-4 col-md-4 col-sm-12">
						<ul class="list-group bg-dark text-center text-white ">
							<li class="list-group mt-4">
								<h6>移动开发</h6>
								<p class="d-none d-lg-block">
									Lorem, ipsum dolor sit amet consecteturadipisicing elit. Sit architecto nam
									aliquamtotam voluptate.Tenetur assumenda iure
									sed laborum molestiae?
								</p>

							</li>
							<li class="mb-4">
								<button class="btn btn-primary btn-sm" type="button">游戏与应用</button>
							</li>

						</ul>
					</div>
				</div>
			</div>
			<div class="row bg-dark">
				<div class="col-lg-6 mt-5 ps-5 pe-lg-0 pe-sm-5 col-md-12">
					<ul class="list-group  text-white">
						<li class="list-group">
							<h4>关于大纲</h4>
							<p>
								Web开发技术是学生学习其他Web类课程的基础,是计算机与信息技术课程体系中Web应用开发类模块中的核心课程之一。
							</p>
							<p>
								过对网站前端开发技术的学习，使学生掌握网站开发与建设的HTML、CSS及JAVASCRIPT等基础技术，熟悉以Bootstrap为代表的框架技术，为后续的JAVA
								WEB编程基础课程打下良好的知识储备。
							</p>
						</li>
						<li class="mt-3 mb-lg-0 mb-3">
							<button class="btn bg-white btn-sm" type="button">查看更多>></button>
						</li>

					</ul>
				</div>
				<div class="col-lg-6 d-none d-lg-block mt-4  pe-5 mb-4">
					<div class=" tu ">
						<img src="img/1.5.png" alt="" class="img-fluid ">
					</div>

				</div>
			</div>
			<div class="row bg-white">
				<div class="col-12 mt-4">
					<h4 class="text-center ">学习路径</h4>
					<ul class="mt-4 mb-4">
						<li class="wenzi d-flex ">
							<p>前端基础</p>
							<p class="d-none d-lg-block">HTML,CSS,JavaScript</p>
							<p>→前端进阶→前端框架</p>
							<p class="d-none d-lg-block">JQuery,jQuery UI,JQuery Mobile,Ext JS ,AngularJS</p>
							<p>→HTML5游戏</p>
						</li>
						<hr>
						<li class="wenzi d-flex ">
							<p>后端开发→Python</p>
							<p class="d-none d-lg-block">Python基础web2pyDjangoFlaskGUI数据挖掘与分析</p>
							<p>→PHP→Node.js→J2EE</p>
							
						</li>
						<hr>
						<li class="wenzi ">
							<p>应用开发(AndroidiOS)→游戏开发(CocosUnity3DSpriteKit 2DUnreal)→常用框架(CordovaReact Native)</p>
						</li>
						
					</ul>
				</div>
			</div>
			<div class="row bg-dark">
				<div class="row">
				    <div class="col-12 mt-5 ps-5">
				        <h4 class="text-white ">教学团队</h4>
				        <p class="lead text-light pb-2">专注于Java、Python、人工智能、大数据、前端热门专业，建立专职课研团队及教学团队，形成严格的筛选体系。 </p>
				    </div>
				</div>
				<div class="row ps-5 pe-4 mb-3">
					<div class="col-lg-3 col-md-6 ">
					    <div class="bg-light  text-center rounded-2">
					        <img src="img/head1.png" alt="" class="rounded-circle img-fluid my-3" />
					        <h4 class="fs-3 text-dark">Trump</h4>
					        <p class="small fs-6 p-2 d-none d-lg-block">
					            资深Web前端开发工程师，主持多项大型项目。
					        </p>
					    </div>
					</div>
					<div class="col-lg-3 col-md-6">
					    <div class="bg-light  text-center rounded-2">
					        <img src="img/head2.png" alt="" class="rounded-circle img-fluid my-3" />
					        <h4 class="fs-3 text-dark">Rose</h4>
					        <p class="small fs-6 p-2 d-none d-lg-block">
					            十年开发经验，精通Java、Oracle、Python。
					        </p>
					    </div>
					</div>
					<div class="col-lg-3 col-md-6">
					    <div class="bg-light  text-center rounded-2">
					        <img src="img/head3.png" alt="" class="rounded-circle img-fluid my-3" />
					        <h4 class="fs-3 text-dark">Allen</h4>
					        <p class="small fs-6 p-2 d-none d-lg-block">
					            Eos officiis culpa soluta labore molestiae dolores?
					        </p>
					    </div>
					</div>
					<div class="col-lg-3 col-md-6">
					    <div class="bg-light  text-center rounded-2">
					        <img src="img/head4.png" alt="" class="rounded-circle img-fluid my-3" />
					        <h4 class="fs-3 text-dark">Lucky</h4>
					        <p class="small fs-6 p-2 d-none d-lg-block">
					            Necessitatibus repudiandae impedit sunt maiores fugit.
					        </p>
					    </div>
					</div>
				</div>
			</div>
			<div class="row bg-white">
				<div class="col-md-12 text-center mt-4">
					<h4>Question & Answer</h4>
				</div>
				<div class="col-md-12 mb-4 ps-5">
					<div class="accordion mt-3" id="acontainer">
					    <div class="accordion">
					        <h4 class="accordion-header" id="heading1">
					            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1">
					                前端开发包括哪些内容
					            </button>
					        </h4>
					        <div id="collapse1" class="accordion-collapse collapse " data-bs-parent="#acontainer">
					            <div class="accordion-body">
					                根据后端/接口文档，进行页面构建和开发，并且不断针对数据和功能相关内容与后端进行沟通
					            </div>
					        </div>
					    </div>
						<hr>
					    <div class="accordion">
					        <h4 class="accordion-header" id="heading2">
					            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2">
					                后端开发包括哪些内容
					            </button>
					        </h4>
					        <div id="collapse2" class="accordion-collapse collapse" data-bs-parent="#acontainer">
					            <div class="accordion-body">
					                后端是工作在服务器上的，负责通过API向前端或其他系统提供其所需的信息(如数据等)
					            </div>
					        </div>
					    </div>
						<hr>
					    <div class="accordion">
					        <h4 class="accordion-header" id="heading3">
					            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" >
					                移动开发包括哪些内容
					            </button>
					        </h4>
					        <div id="collapse3" class="accordion-collapse collapse" data-bs-parent="#acontainer">
					            <div class="accordion-body">
					                学习ios和Android也是两码事，ios语言是OC和swift，Android的话就是Java。
					            </div>
					        </div>
					    </div>
					</div>
				</div>	
			</div>
			<div class="row bg-dark  text-white">
				<div class="col-lg-3 col-md-6 mt-5">
					<h3 class="text-center ">更多链接</h3>
					<div class="a text-start ps-5 ms-5 mt-4 ">
						<ul>
							<li><a href="#">主页</a></li>
							<li><a href="#">关于</a></li>
							<li><a href="#">评价</a></li>
							<li><a href="#">技术与支持</a></li>
						</ul>
					</div>
					
				</div>
				<div class="col-lg-3 col-md-6 mt-5 ">
					<h3 class="text-center">为你服务</h3>
					<div class="b mt-4 ms-5 ps-5 ">
						<ul>
							<li><a href="#">服务宗旨</a></li>
							<li><a href="#">联系客服</a></li>
							<li><a href="#">使用帮助</a></li>
							<li><a href="#">隐私政策</a></li>
						</ul>
					</div>
					
				</div>
				<div class="col-lg-3 col-md-6 mt-5">
					<h3 class="text-center">联系我们</h3>
					<div class="c ps-5 ms-md-0 ms-5  mt-4">
						<ul>
							<li><img src="img/2.1.png" alt="" style="width: 20px;height: 20px;">&ensp;<a href="#">+86-1868686868</a></li>
							<li><img src="img/2.2.png" alt="" style="width: 20px;height: 18px;">&ensp;<a href="#">weblearning@gmail.com</a></li>
							<li><img src="img/2.3.png" alt="" style="width: 20px;height: 18px;">&ensp;<a href="#">Dalian, Liaoning - 116000</a></li>
						</ul>
					</div>
					
				</div>
				<div class="col-lg-3 col-md-6 mt-5">
					<h3 class="text-center">关注我们</h3>
					<div class="d ps-5 ms-lg-4 mt-4 ms-5">
						<ul>
							<li><img src="img/2.4.png" alt="" style="width: 20px;height: 20px;">&ensp;<a href="#">微博</a></li>
							<li><img src="img/2.5.png" alt="" style="width: 23px;height: 20px;">&ensp;<a href="#">微信</a></li>
							<li><img src="img/2.6.png" alt="" style="width: 20px;height: 20px;">&ensp;<a href="#">QQ</a></li>
							<li><img src="img/2.7.png" alt="" style="width: 20px;height: 20px;">&ensp;<a href="#">Twitter</a></li>
							<li><img src="img/2.8.png" alt="" style="width: 20px;height: 20px;">&ensp;<a href="#">Github</a></li>
						</ul>
					</div>
					
				</div>
				<div class="col-12 text-center mt-3 mb-5">
					<h5>Copy  2022 Web前端开发技术</h5>
				</div>
			</div>
		</div>
	</body>
</html>